import { Button, message, Tag } from 'antd';
import { connect } from 'react-redux';
import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { AUTH_USERTYPE } from '@conf';
import LayoutHeader from '@/layouts/components/Header';
import { USER_AUTH_KEY, ADMIN_AUTH_KEY, SUPER_ADMIN_AUTH_KEY } from '@conf';
import './index.less';
import gameIcon from './icons/game.svg';
import managerIcon from './icons/manager.svg';
import { IPCsend } from '@/utils/electronIpc';

const mapStateToProps = (state: any) => state.global;

const UserOpens = [
	{
		label: '麻将权限-super',
		href: '/super/authlist',
		bg: managerIcon,
		bgcolor: 'hsl(195, 74%, 62%)',
		auth: [SUPER_ADMIN_AUTH_KEY],
	},
	{
		label: '麻将教学系统-后台管理',
		href: '/majom/home',
		bg: managerIcon,
		bgcolor: 'hsl(195, 74%, 62%)',
		auth: [SUPER_ADMIN_AUTH_KEY, ADMIN_AUTH_KEY],
	},
	{
		label: '麻将教学系统',
		href: '/useruse/mahjongopen',
		bg: gameIcon,
		bgcolor: 'hsl(195, 74%, 62%)',
		auth: [ADMIN_AUTH_KEY, USER_AUTH_KEY],
	},
];

export default connect(mapStateToProps)(({ userInfo, authLevel }: any) => {
	const navigate = useNavigate();
	const days = Math.round((new Date(userInfo.endTime).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000));

	const opendevtoolspass = 'ykxbc'; // esc + pass + enter
	let iptpass: Array<string> = [];
	let okipt = false;
	function init(tag: boolean) {
		iptpass = [];
		okipt = tag;
	}
	function onkeyup({ key }: { key: any }) {
		switch (key) {
			case 'Escape':
				init(true);
				break;
			case 'Enter':
				iptpass.join('') === opendevtoolspass && IPCsend('opendevtools');
				init(false);
				break;
			default:
				okipt && iptpass.push(key);
				iptpass.length >= 7 && init(false);
		}
	}
	useEffect(() => {
		window.addEventListener('keyup', onkeyup);
		return () => {
			window.removeEventListener('keyup', onkeyup);
		};
	});
	return (
		<div className=' h-screen flex flex-col'>
			<LayoutHeader mode='open' />
			<div className=' flex-1 h-0 p-4 overflow-y-scroll flex flex-wrap gap-4'>
				{UserOpens.map(({ label, href, bg, auth }, index: number) =>
					auth.includes(authLevel) ? (
						<div key={label} className={`card-k01 work font-sans`}>
							<div className='img-section' style={{ background: 'hsl(195, 74%, 62%)' }}>
								<img src={bg} alt='' className=' float-right h-20' />
							</div>
							<div
								className='card-k01-desc relative -top-3 p-4 flex flex-col'
								onClick={() => {
									if (auth.includes(authLevel)) {
										navigate(href);
										document.title = label;
									} else message.error('权限不足');
								}}>
								<div className='card-k01-header'>
									<div className=' text-base'>{label}</div>
								</div>
								<div className=' text-xl font-medium my-auto hvblue transition-all duration-500'>点击进入</div>
								<p className='text-sm font-mono'>Remaining {days} days</p>
							</div>
						</div>
					) : null
				)}
			</div>
			{/* <div className=' whitespace-pre bg-blue-50 text-gray-400 p-0.5'>{JSON.stringify(userInfo, null, 2)}</div> */}
		</div>
	);
});
